<template>
  <div>
    <ul>
      <li class="song" v-for="item in musicList" :key="item.song_id">
        <!-- 图片 -->
        <div class="song-cover">
          <img v-lazy="item.pic_small" alt="歌曲封面" />
        </div>

        <!-- 文字 -->
        <div class="song-desc">
          <div class="song-desc-title">{{item.title}}</div>
          <div class="song-desc-author">{{item.author}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import http from "@api/http";
export default {
  created() {
    // 发送http请求
    http
      .get(
        `/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=5`
      )
      .then(res => {
        this.musicList = res.song_list;
      });
  },
  data() {
    return {
      musicList: []
    };
  },
  props: {
    type: {
      type: Number,
      default: 1
    }
  }
};
</script>

<style lang="less" scoped>
.song {
  display: flex;
  padding: 10px;
  // .song-cover
  &-cover {
    width: 60px;
    height: 60px;
    img {
      height: 100%;
      width: 100%;
      display: block;
    }
  }

  &-desc {
    flex: 1;
    padding: 0 5px;
    &-title {
      font-size: 18px;
    }

    &-author {
      font-size: 13px;
      color: #999;
    }
  }
}
</style>